<template>
  <div>
    <div v-if="isShowText" class="gl_mb_20">
      <el-row class="gl_mb_10">
        <el-col :span="12">
          <span class="info_title">订单编号：</span>
          <span>{{ offlineData._orderNo || '' }}</span>
        </el-col>
        <el-col :span="12">
          <span class="info_title">收款账户名称：</span>
          <span>{{ offlineData.offlineBeneficiarysName || '' }}</span>
        </el-col>
      </el-row>
      <el-row class="gl_mb_10">
        <el-col :span="12">
          <span class="info_title">开户行名称：</span>
          <span>{{ offlineData.offlineAccountsWithBank || '' }}</span>
        </el-col>
        <el-col :span="12">
          <span class="info_title">银行卡账号：</span>
          <span>{{ offlineData.offlineAccountNumber || '' }}</span>
        </el-col>
      </el-row>
    </div>

    <div v-if="offlineData.busCollectionCodeList && offlineData.busCollectionCodeList.length">
      <div class="gl_mb_10">付款码：</div>
      <ul class="gl_clear">
        <li v-for="(item, index) in offlineData.busCollectionCodeList" :key="index" class="gl_fl gl_mr_20 gl_mb_10">
          <div class="qrcode_title gl_mb_5">{{ item.name }}</div>
          <el-image class="offline_img" :src="getStaticFileUrl(item.image)" :preview-src-list="[getStaticFileUrl(item.image)]" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    offlineData: {
      type: Object,
      default() {
        return {};
      }
    },
    isShowText: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 获取文件地址
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + '/' + relativeUrl;
    }
  }
};
</script>

<style lang="scss" scoped>
  .offline_img {
    width: 180px;
    height: 180px;
  }
  .qrcode_title {
    width: 180px;
    font-weight: bold;
    text-align: center;
  }

  .info_title {
    font-weight: bold;
  }
</style>
